<template>
  <el-container id="container">
    <el-header class="header">
      <slot name="header"></slot>
    </el-header>
    <el-main class="main">
      <slot name="main"></slot>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: 'c-layout',
}
</script>
<style lang="scss" scoped>
#container {
  display: flex;
  flex-direction: column;
  height: calc(100% - 35px);
  background: #eef1f4;
  padding: 16px;
  .header {
    flex-shrink: 0;
    height: auto !important;
    background: #fff;
    margin-bottom: 16px;
    padding: 5px 10px;
  }
  .main {
    background: #fff;
    height: 100%;
    padding: 5px 10px;
    /** 滚动条样式 */
    &::-webkit-scrollbar {
      /*外层轨道*/
      width: 0px;
      height: 2px;
      background: #ccc;
      border-radius: 2px;
      position: absolute;
      border-radius: 10px;
      left: -5px;
    }
    &::-webkit-scrollbar-thumb {
      /*内层轨道*/
      display: block;
      width: 0px;
      margin: 0 auto;
      border-radius: 10px;
      background: #555;
    }
  }
}
</style>
